<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <!-- <PannelVue>
        <img src="./assets/logo.png" alt="" />
      </PannelVue>
      <PannelVue>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </PannelVue>
      <PannelVue> </PannelVue> -->
      <!-- <PannelVue>
        <template v-slot:title> <h4>芙蓉楼送辛渐</h4></template>

        <template #content>
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p></template
        >
      </PannelVue> -->

      <PannelVue>
        <template v-slot:content="scope">
          <!-- 要拿到组件的list里的acc -->
          <!-- {{ scope }}展开显示的 { "row": { "abb": 1123, "acc": 2233 } } -->
          {{ scope.row.acc }}
        </template>
      </PannelVue>
    </div>
  </div>
</template>

<script>
// 目标：让组件内-内容部分显示不同的标签
// 计数：组件插槽--分发组件要显示标签
// 好处：可以让‘组件’适应更多的项目和场景（更灵活）
// 口诀：
// 1.组件内，用slot标签占位
// 2.使用组件是，有夹着的地方传入具体标签替换

// 目标：给slot插槽设置默认内容
// 语法：slot标签夹着的地方雪茹默认内容
// 效果：如果不传入具体标签，则原地显示默认内容
// 如果传入了具体标签，则显示具体标签

// 目标:具名插槽
// 场景：组件内有2出以上不确定标签的时候
// 口诀：
// 1.组件内，slot标签设置name属性和插槽名字
// 2.使用组件是，夹着的地方，用template配合
// v-slot：插槽名包裹要分发的具体标签替换进去
// 简化：v-slot：可以简化成#

// 目标：作用域插槽
// 场景：当时用“组件插槽”技术是，我们要使用组件内的变量
// 口诀：
// 1.组件内，slot标签上自定义属性绑定组件内变量(动态)
// 2.使用组件是，用b-slot=“临时变量名”，临时变量名手机对应slot身上熟悉和值形成一个对象
import PannelVue from "./components/Pannel.vue"
export default {
  components: {
    PannelVue
  }
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>